<template>
  <div class="center">
    <a-form
      auto-label-width
      ref="demandTemplateRef"
      layout="vertical"
      :model="baseInfo"
    >
      <a-form-item
        field="tempName"
        label="审批流名称"
        validate-trigger="input"
        required
      >
        <a-input
          placeholder="请输入名称"
          message="此项必填!"
          v-model="baseInfo.name"
        />
      </a-form-item>
      <a-form-item
        v-if="props.showTemplate"
        field="tempName"
        label="关联模板"
        validate-trigger="input"
        required
      >
        <a-select
          v-model="baseInfo.templateId"
          placeholder="Select"
          :trigger-props="{ autoFitPopupMinWidth: true }"
        >
          <a-option
            v-for="template in templateList"
            :key="template.id"
            :value="template.id"
            :label="template.tempName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="tempName"
        label="审批被拒后重新提交"
        validate-trigger="input"
        required
      >
        <a-select
          v-model="baseInfo.reCommit"
          placeholder="请选择"
          :trigger-props="{ autoFitPopupMinWidth: true }"
        >
          <a-option :value="1">返回审批流程初始层级</a-option>
          <a-option :value="2"
            >跳过审批流程已通过的层级，返回拒绝的层级</a-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        field="tempName"
        label="审批管理员"
        validate-trigger="input"
        required
      >
        <a-select
          v-model="baseInfo.userStaffId"
          placeholder="请选择"
          :trigger-props="{ autoFitPopupMinWidth: true }"
        >
          <a-option
            v-for="staff in staffList"
            :key="staff.id"
            :value="staff.id"
            :label="staff.name"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="tempName"
        label="是否启用"
        validate-trigger="input"
        required
      >
        <a-switch
          v-model="baseInfo.status"
          :checked-value="1"
          :unchecked-value="2"
          @change="statusChange($event)"
        />
      </a-form-item>
      <a-form-item
        field="tempName"
        label="流程说明"
        validate-trigger="input"
        required
      >
        <a-textarea
          v-model="baseInfo.description"
          placeholder="说明"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref, reactive } from 'vue';
  import { getDemandTemplateList } from '@/api/order-management/client-management/order';
  import { GetOrganizationchart } from '@/api/home/System settings/organizational-structure';

  const props = withDefaults(
    //参数说明
    defineProps<{
      showTemplate: boolean; // 是否显示模板列表
      data: {
        type: number;
        name: string;
        templateId: number;
        userStaffId: number;
        description: string;
        status: number;
        reCommit: number;
      };
    }>(),
    {
      showTemplate: false,
    }
  );
  const baseInfo = computed(() => {
    return props.data;
  });
  interface TemplateType {
    id: number;
    tempName: string;
  }
  const templateList = ref<TemplateType[]>([]);
  // 获取模板列表
  const getTemplate = async () => {
    templateList.value = await getDemandTemplateList({ type: 1 });
    templateList.value.unshift({ id: 0, tempName: '请选择' });
  };
  interface StaffType {
    id: number;
    name: string;
  }
  const staffList = ref<StaffType[]>([]);
  const department = ref([]);
  // 获取人员
  const getStaff = async () => {
    let res = await GetOrganizationchart();
    staffList.value = res.Staff;
    staffList.value.unshift({ id: 0, name: '请选择' });

    department.value = res.Department;
  };
  onMounted(() => {
    getTemplate();
    getStaff();
  });
  const statusChange = (e: any) => {};
</script>
